<template>
    <div class="message">
      <top-bar>
        <p slot="left" v-if="backshow"></p>
        <p slot="title">{{title}}</p>
        <p slot="right"></p>
        <!--<img src="../../../static/img/add.png" slot="right" ref="button" @click="toggle"/>-->
      </top-bar>
      <section class="search-box">
        <span @click="gotoSearch">搜索</span>
      </section>
      <section class="message-wrapper">
        <ul>
          <li @click="layoutTip">
            <figure>
              <img src="./img/todayHealthy.png"/>
              <div class="content">
                <h3 class="title"><span class="maintitle">今日健康</span><span class="time">23:15</span></h3>
                <div class="description">
                  <p class="ellipsis flex">吃猪血能清肺？然而猪血的这这四个好处你知道吗</p>
                  <!--<new-msg></new-msg>-->
                </div>
              </div>
            </figure>
          </li>
          <li>
            <router-link to="/message/messageDetail">
            <figure>
              <img src="./img/appointment.png"/>
              <div class="content">
                <h3 class="title"><span class="maintitle">预约挂号</span><span class="time">23:15</span></h3>
                <div class="description">
                  <p class="ellipsis flex">挂号信息</p>
                  <new-msg :num="newMsgNum"></new-msg>
                </div>
              </div>
            </figure>
            </router-link>
          </li>
          <li @click="layoutTip">
            <figure>
              <img src="./img/sysInfo.png"/>
              <div class="content">
                <h3 class="title"><span class="maintitle">系统消息</span><span class="time">23:15</span></h3>
                <!--<p class="description ellipsis">尊敬的用户，为了提升服务的稳定性，我们决定于23:55停机维护</p>-->
                <div class="description">
                  <p class="ellipsis flex">尊敬的用户，为了提升服务的稳定性，我们决定于23:55停机维护</p>
                  <!--<new-msg></new-msg>-->
                </div>
              </div>
            </figure>
          </li>
          <li @click="layoutTip">
            <figure>
              <img src="./img/filter.png"/>
              <div class="content">
                <h3 class="title"><span class="maintitle">小薇优选</span><span class="time">23:15</span></h3>
                <div class="description">
                  <p class="ellipsis flex">一条能感知清洁度的毛巾</p>
                  <!--<new-msg></new-msg>-->
                </div>
              </div>
            </figure>
          </li>
          <li @click="layoutTip">
            <figure>
              <img src="./img/specialOffer.png"/>
              <div class="content">
                <h3 class="title"><span class="maintitle">优惠活动</span><span class="time">23:15</span></h3>
                <div class="description">
                  <p class="ellipsis flex">大闸蟹、50元京东e卡、50元话费免费送！！！</p>
                  <!--<new-msg></new-msg>-->
                </div>
              </div>
            </figure>
          </li>
        </ul>
      </section>
      <!--<mu-raised-button label="点这里" ref="button" @click="toggle"/>-->
      <mu-popover :popoverClass="'messagePopover'"
                  :overlay="true"
                  :overlayOpacity="0.4"
                  :open="open"
                  :autoPosition="false"
                  :trigger="trigger"
                  :anchorOrigin="anchorOrigin"
                  :targetOrigin="targetOrigin"
                  @close="handleClose">
        <!--<mu-menu>-->
          <!--<mu-menu-item title="Refresh" />-->
          <!--<mu-menu-item title="Send feedback" />-->
          <!--<mu-menu-item title="Settings" />-->
          <!--<mu-menu-item title="Help" />-->
          <!--<mu-menu-item title="Sign out" />-->
        <!--</mu-menu>-->
        <section class="popover-container">
          <ul>
            <li v-for="item in 4">
              <i class="icons"></i>
              <span>扫一扫</span>
            </li>
          </ul>
        </section>
      </mu-popover>
      <nav-footer :current-index="1"></nav-footer>
      <transition name="msgDetail">
        <router-view :orders="orders"></router-view>
      </transition>
      <error-tip :err-msg="'该功能尚未开通！'" v-if="dialog"></error-tip>
    </div>
</template>

<script>
    import TopBar from "../../components/top-bar/top-bar";
    import Search from "../search";
    import NavFooter from "../../components/footer/navFooter";
    import NewMsg from "../../components/newMsg/newMsg";
    import {ERR_OK} from "../../api/config";
    import {getOrders} from "../../api/ajax";
    import ErrorTip from "../../components/errorTip/errorTip";
    import {mapMutations, mapGetters} from 'vuex';

    export default {
      components: {
        ErrorTip,
        NewMsg,
        NavFooter,
        Search,
        TopBar},
      name: "message",
      mounted () {
        this.trigger = this.$refs.button
      },
      data () {
        return {
          open: false,
          trigger: null,
          anchorOrigin: {
            vertical: 'bottom',
            horizontal: 'right'
          },
          targetOrigin: {
            vertical: 'top',
            horizontal: 'right'
          },
          orders: [],
          dialog: false,
          alertText: '',
          title: '消息',
          backshow: true
        }
      },
      methods: {
        layoutTip () {
          this.dialog = true
          setTimeout(() => {
            this.dialog = false
          }, 1000)
        },
        toggle () {
          this.open = !this.open
        },
        handleClose () {
          this.open = false
        },
        gotoSearch () {
          this.$router.push('/search')
        },
        ...mapMutations({
          setNewMsgNum: 'SET_NEW_MSG_NUM'
        })
      },
      beforeRouteEnter(to, from, next){
        // 在渲染该组件的对应路由被 confirm 前调用
        // 不！能！获取组件实例 `this`
        // 因为当守卫执行前，组件实例还没被创建
        // 一定要调用next()，否则不会跳转
        getOrders().then((res) => {
          let response = res.data
          if (response.code === ERR_OK) {
            let oldOrders = JSON.parse(window.localStorage.getItem('orders'))
            // window.addEventListener('storage', function (event) {
            //   console.log(event.key + "=" + event.newValue)
            // })
            let numm = 0
            if (oldOrders) {
              if (oldOrders.length === response.result.length) {

              } else {
                numm = response.result.length-oldOrders.length
              }
            }
            next(vm => {
              vm.orders = response.result.reverse()
              vm.setNewMsgNum(numm)
            })
          }
        }).catch((err) => {
          console.log(err)
          next()
        })
      },
      computed: {
        ...mapGetters([
          'newMsgNum'
        ])
      },
      watch: {
        '$route' () {
          let path = this.$route.path
          if (path === '/message') {
            this.title = '消息'
            this.backshow = true
          } else if (path === '/message/messageDetail') {
            this.title = '预约列表'
            this.backshow = false
          } else if (path === '/message/messageDetail/messageContent') {
            this.title = '订单详情'
            this.backshow = false
          }
        }
      }
    }
</script>

<style scoped lang="scss">
  @import "../../common/sass/mixin";
  @import "../../common/sass/common";

  .message{
    background-color: $bc;
    height: 100vh;
    padding-top: 90px;
    position: relative;
    .search-box{
      padding: 14px 20px;
      display: flex;
      justify-content: center;
      span{
        padding: 0 48px;
        line-height: 50px;
        background-color: #ffffff;
        width: 100%;
        border: 1px solid $borderCor;
        border-radius: 5px;
        color: $fgc;
        @include font-dpr(24px);
        background-image: url("../../../static/img/search.png");
        background-repeat: no-repeat;
        background-position: center left 14px;
        background-size: 24px 24px;
      }
    }
    .message-wrapper{
      ul{
        padding-left: 20px;
        background-color: #ffffff;
        li{
          figure{
            display: flex;
            align-items: center;
            margin: 0;
            img{
              width: 70px;
              height: 70px;
            }
            .content{
              flex: 1;
              overflow: hidden;
              display: flex;
              flex-direction: column;
              justify-content: center;
              height: 110px;
              border-bottom: 1px solid $borderCor;
              padding: 0 14px;
              .title{
                @include font-dpr(28px);
                color: $fbc;
                display: flex;
                align-items: center;
                .maintitle{
                  flex: 1;
                }
                .time{
                  color: $fgc;
                  @include font-dpr(20px);
                }
              }
              .description{
                @include font-dpr(24px);
                color: #5b5b5b;
                display: flex;
                .flex{
                  flex: 1;
                }
                span{
                  flex: 1;
                }
              }
            }
          }
        }
      }
    }
  }
  .popover-container{
    margin-top: 5px;
    ul{
      li{
        padding: 0 28px;
        line-height: 70px;
        border-bottom: 1px solid $borderCor;
        display: flex;
        align-items: center;
        .icons{
          display: inline-block;
          height: 30px;
          width: 30px;
          background-image: url("../../../static/img/goods/special_3@2x.png");
          background-size: 100% 100%;
          background-repeat: no-repeat;
          margin-right: 18px;
        }
        span{
          @include font-dpr(26px);
          color: #5b5b5b;
        }
        &:last-child{
          border: none;
        }
      }
    }
  }
  .msgDetail-enter-active, .msgDetail-leave-active{
    transition: all 0.3s ease;
  }
  .msgDetail-enter, .msgDetail-leave-to{
    transform: translate3d(100%, 0, 0);
  }
  .msgDetail-leave, .msgDetail-enter-to{
    transform: translate3d(0, 0, 0);
  }
</style>
